<template>
  <view
    class="tn-avatar"
    :class="[avatarClass]"
    :style="avatarStyle"
    @tap.stop="handleClick"
  >
    <!-- 显示图标或者图片 -->
    <view
      v-if="icon !== ''"
      class="tn-avatar__icon"
    >
      <tn-icon :icon="icon" :size="iconSize" :img-mode="imgMode"></tn-icon>
    </view>
    <!-- 显示文本 -->
    <view
      v-else
      class="tn-avatar__text"
    >
      <slot></slot>
    </view>

    <!-- 角标显示 -->
    <tn-badge
      v-if="props?.badge"
      absolute
      absolute-center
      :bg-color="badgeConfig?.bgColor || ''"
      :color="badgeConfig?.color || ''"
      :absolute-position="badgeConfig?.position || (shape === 'square' ? {} : { top: '5%', right: '18%'})"
      :size="badgeConfig?.size || size || ''"
      :dot="badgeConfig?.dot || false"
    >
      <!-- 显示图标或者图片 -->
      <tn-icon
        v-if="badgeContentType === 'icon'"
        :icon="badgeConfig.icon"
      ></tn-icon>
      <slot v-else name="badge"></slot>
    </tn-badge>
  </view>
</template>

<script lang="ts" setup>
import { avatarProps, avatarEmits } from '../../../types/tn-avatar'
import { ColorInfo, TuniaoSizes, TuniaoSize, ImageMode } from '../../../types/tuniao-ui'
import { computed, watchEffect, CSSProperties } from 'vue'
import TnIcon from '../../tn-icon/src/Icon.vue'
import TnBadge from '../../tn-badge/src/Badge.vue'
import useComponentColor from '../../../libs/hooks/useComponentColor'
import { handleValueWithUnit } from '../../../utils'

const props = defineProps(avatarProps)
const emits = defineEmits(avatarEmits)

const { generateColorInfo, splitColorInfo } = useComponentColor()
let componentColorInfo = generateColorInfo(props?.color || '', props?.bgColor || '')
// 监听颜色变化实时修改颜色对应的属性
watchEffect(() => {
  componentColorInfo = generateColorInfo(props?.color || '', props?.bgColor || '')
})

// 解析边框颜色
const borderColor = computed<ColorInfo>(() => {
  return splitColorInfo('border', props?.borderColor || '')
})
// 解析阴影颜色
const shadowColor = computed<ColorInfo>(() => {
  return splitColorInfo('shadow', props?.shadowColor || '')
})

/**
 * 判断是否为图片
 * 如果包含/则认为是图片
 */
const isImg = computed<boolean>(()=> {
  return props?.icon?.indexOf('/') !== -1
})
// 图片裁剪模式
const imgMode = computed<ImageMode>(() => {
  return props.imgMode as ImageMode
})

// 头像样式
const avatarStyle = computed<CSSProperties>(() => {
  let style: CSSProperties = {}

  // 如果size不在默认size值中则是自定义size
  if (!!props.size && !TuniaoSizes.includes(props.size as TuniaoSize)) {
    style.width = handleValueWithUnit(props.size)
    style.height = style.width
  }
  if (props?.fontSize) {
    style.fontSize = handleValueWithUnit(props.fontSize)
  }

  if (componentColorInfo.style?.color) {
    style.color = componentColorInfo.style.color
  }
  if (componentColorInfo.style?.backgroundColor) {
    style.backgroundColor = componentColorInfo.style.backgroundColor
  }

  if (props?.border && borderColor.value.type === 'style') {
    style.borderColor = borderColor.value.value
  }
  if (props?.shadow) {
    if (shadowColor.value.type === 'style') {
      style.boxShadow = `6rpx 6rpx 8rpx ${shadowColor.value.value}`
    }
    
    // 如果设置了阴影并且当前显示的是图片时使用当前的图片作为背景图片然后做阴影
    if (isImg.value) {
      style.backgroundImage = `url(${props.icon})`
    }
  }

  return Object.assign(style, props?.customStyle || {})
})

// 头像对应类
const avatarClass = computed<string>(() => {
  let clazz: string[] = []

  if (componentColorInfo.class.length > 0) {
    clazz.push(...componentColorInfo.class)
  }
  if (props?.fontBold) {
    clazz.push('tn-text-bold')
  }

  // 设置默认size
  if (props?.size && TuniaoSizes.includes(props.size as TuniaoSize)) {
    clazz.push(`tn-avatar--${props.size}`)
  }
  // 设置默认type
  if (props?.type) {
    clazz.push(`tn-type-${props.type}`)
  }
  // 设置形状
  if (props?.shape) {
    clazz.push(`tn-avatar--${props.shape}`)
  }
  // 设置阴影
  if (props?.shadow) {
    // 判断显示的是否为图片
    if (isImg.value) {
      clazz.push('tn-shadow-blur')
    } else {
      clazz.push('tn-shadow')
      if (shadowColor.value.type === 'class') {
        clazz.push(shadowColor.value.value)
      }
    }
    
  }
  // 设置边框状态
  if (props?.border) {
    clazz.push('tn-border')
    if (props?.borderBold) {
      clazz.push('tn-border-bold')
    }
    if (borderColor.value.type === 'class') {
      clazz.push(borderColor.value.value)
    }
  }

  return clazz.join(' ')
})

// 图标/图片大小设置
const iconSizeMap: {
  img: {
    [prop: string]: number
  },
  icon: {
    [prop: string]: number
  }
} = {
  img: { 
    normal: 70,
    sm: 50,
    lg: 90,
    xl: 120
  },
  icon: {
    normal: 40,
    sm: 30,
    lg: 60,
    xl: 80
  }
}
const iconSize = computed<string | number>(() => {
  if (!!props.size && TuniaoSizes.includes(props.size as TuniaoSize)) {
    if (isImg.value) {
      return iconSizeMap['img'][props.size]
    } else {
      return iconSizeMap['icon'][props.size]
    }
  }
  if (!props.size && !props.fontSize) {
    return iconSizeMap[isImg.value ? 'img' : 'icon']['normal']
  }
  return isImg.value ? props.size : props.fontSize
})

// 角标内容类型
const badgeContentType = computed<'icon' | 'text'>(() => {
  if (props?.badgeConfig?.icon) {
    return 'icon'
  }
  return 'text'
})


// 处理点击事件
const handleClick = () => {
  emits('click', props.index)
}
</script>

<script lang="ts">
export default {
  options: {
    // 在微信小程序中将组件节点渲染为虚拟节点，更加接近Vue组件的表现(不会出现shadow节点下再去创建元素)
    virtualHost: true
  }
}
</script>

<style lang="scss" scoped>
@import '../../../theme.scss';

.tn-avatar {
  position: relative;
  width: 70rpx;
  height: 70rpx;
  border-radius: 50%;
  background-color: #CECECE;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  &.tn-border {
    background-color: transparent !important;
  }

  &__icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
  }

  &__text {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
  }

  &--square {
    border-radius: 10rpx;
    .tn-avatar__icon {
      border-radius: 10rpx;
    }
  }

  /* 内置尺寸 start */
  &--sm {
    width: 50rpx;
    height: 50rpx;
    font-size: 20rpx;
  }
  &--lg {
    width: 90rpx;
    height: 90rpx;
    font-size: 40rpx;
  }
  &--xl {
    width: 120rpx;
    height: 120rpx;
    font-size: 60rpx;
  }
  /* 内置尺寸 end */
}
</style>
